<template>
  <!-- <el-row v-if="rowType === 1" class="hover-row" type="flex">
    <el-col
      :class="`${isHeader ? 'border-left' : 'top-left'} hight-light`"
      :span="secondTitleSpan"
    >
      <el-row type="flex">
        <el-col :span="unit ? 16 : 24">
          {{ title }}
        </el-col>
        <el-col v-if="unit" :span="8" align="right">
          {{ unit }}
        </el-col>
      </el-row>
    </el-col>
    <el-col
      :class="`${isHeader ? 'border-left' : 'top-left'} hight-light`"
      :span="dataSpan"
      align="center"
    >
      {{ isHeader ? "井深" : list[0][dataType][dataName] }}
    </el-col>
    <el-col
      :class="`${isHeader ? 'border-left' : 'top-left'} hight-light`"
      :span="24 - secondTitleSpan - dataSpan"
      align="center"
    >
      {{ isHeader ? "简要岩性描述" : "细砂岩 中砂岩 泥岩" }}
    </el-col>
  </el-row> -->

  <!-- <el-row v-else-if="rowType === 2" class="hover-row" type="flex">
    <el-col
      :span="2"
      :class="`${
        isHeader ? 'border-left' : isTopBlod ? 'top-blod-left' : 'top-left'
      } hight-light`"
    >
      {{ title }}
    </el-col>
    <el-col
      :class="`${
        isHeader ? 'border-left' : isTopBlod ? 'top-blod-left' : 'top-left'
      } hight-light`"
      :span="secondTitleSpan - 2"
    >
      <el-row type="flex" v-for="(item, id) in itemList" :key="id">
        <el-col :span="item.unit ? 16 : 24" :class="id === 0 ? '' : 'top'">
          {{ item.title }}
        </el-col>
        <el-col
          v-if="item.unit"
          :span="8"
          align="right"
          :class="id === 0 ? '' : 'top'"
        >
          {{ item.unit }}
        </el-col>
      </el-row>
    </el-col>
    <el-col
      :class="`${
        isHeader ? 'border-left' : isTopBlod ? 'top-blod-left' : 'top-left'
      } hight-light`"
      :span="dataSpan"
      v-for="(item, id) in list"
      :key="id"
      align="center"
    >
      <el-row
        type="flex"
        v-for="(item, id) in itemList"
        :key="id"
        :class="id === 0 ? '' : 'top'"
      >
        {{ 111 }}
      </el-row>
    </el-col>
  </el-row> -->

  <!-- <el-row v-else class="hover-row" type="flex">
    <el-col
      :class="`${
        isHeader ? 'border-left' : isTopBlod ? 'top-blod-left' : 'top-left'
      } hight-light`"
      :span="secondTitleSpan"
    >
      <el-row type="flex">
        <el-col :span="unit ? 16 : 24">
          {{ title }}
        </el-col>
        <el-col v-if="unit" :span="8" align="right">
          {{ unit }}
        </el-col>
      </el-row>
    </el-col>
    <el-col
      :class="`${
        isHeader ? 'border-left' : isTopBlod ? 'top-blod-left' : 'top-left'
      } hight-light`"
      :span="dataSpan"
      v-for="(item, id) in list"
      :key="id"
      align="center"
    >
      {{ item[dataType][dataName] }}
    </el-col>
  </el-row> -->

  <el-row class="hover-row" type="flex">
    <el-col
      :class="`${isHeader ? 'border-left' : 'top-left'} hight-light`"
      :span="secondTitleSpan"
    >
      {{ title }}
    </el-col>
    <el-col
      :class="`${isHeader ? 'border-left' : 'top-left'} hight-light`"
      :span="dataSpan"
      v-for="(item, id) in list"
      :key="id"
      align="center"
    >
      {{
        item !== {} && item[dataType] && item[dataType][dataName]
          ? item[dataType][dataName]
          : ''
      }}
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'DataRow',
  props: {
    rowType: {
      /**
       * rowType：1/2/3... 每一类样式不一样
       * 1 -> 地质分层的每一行，如：地质分层->Qp
       * 2 -> 由二级表头的行，如：油层位置->显示顶
       * else -> 每一部分数据的中间某行，正常效果，如：基本数据->套管尺寸
       */
      type: Number,
      default: 99,
    },
    // isHeader - 表示是否为该部分的首行
    isHeader: {
      type: Boolean,
      default: false,
    },
    // isTopBlod - 表示该行上边框是否加粗
    isTopBlod: {
      type: Boolean,
      default: false,
    },
    secondTitleSpan: {
      type: Number,
      default: 4,
    },
    title: {
      type: String,
      default: '',
    },
    itemList: {
      type: Array,
      default: () => [],
    },
    unit: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: [],
    },
    dataSpan: {
      type: Number,
      default: 4,
    },
    dataType: {
      type: String,
      default: '',
    },
    dataName: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss" scoped>
.hover-row {
  &:hover {
    .hight-light {
      cursor: pointer;
      background-color: skyblue;
    }
  }

  .border-left {
    border-left: 1px solid;
  }

  .top-left {
    border-top: 1px solid;
    border-left: 1px solid;
  }

  .top-blod-left {
    border-top: 2px solid;
    border-left: 1px solid;
  }
  .top {
    border-top: 1px solid;
  }
  .top-blod {
    border-top: 2px solid;
  }
}
</style>